<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
	</head>
	<a href="directory/cssExprience/index.html">css类</a>
	<a href="directory/jsExprience/index.html">js类</a>
	<a href="directory/frameExprience/index.html">框架类</a>

	<body>
		<script type="text/javascript">
			Object.prototype.addCSS = function(cssText) {
				//创建一个style元素
				var style = document.createElement('style'),
					head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
				style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
				if(style.styleSheet) { //IE
					var func = function() {
						try { //防止IE中stylesheet数量超过限制而发生错误
							style.styleSheet.cssText = cssText;
						} catch(e) {

						}
					}
					if(style.styleSheet.disabled) { //如果当前styleSheet还不能用，则放到异步中则行
						setTimeout(func, 10);
					} else {
						func();
					}
				} else { //w3c
					var textNode = document.createTextNode(cssText); //w3c浏览器中只要创建文本节点插入到style元素中就行了
					style.appendChild(textNode);
				}
				head.appendChild(style); //把创建的style元素插入到head中   
			};
			//使用
			Object.addCSS('#demo{ height: 30px; background:#f00;}');

			function change(f) {
				f.onchange = function() {
					var windowURL = window.URL || window.webkitURL,
						dataURL, _this = this;
					dataURL = windowURL.createObjectURL(this.files[0]);
					dealImage(dataURL, this, function(e) {
						var img = document.createElement("img");
						img.setAttribute("src", e);
						_this.parentNode.insertBefore(img, _this);
					});
				}
			};

			function dealImage(path, obj, callback) {
				var img = new Image();
				img.src = path;
				img.onload = function() {
					var that = this;
					// 默认按比例压缩
					var w = that.width,
						h = that.height,
						scale = w / h;
					w = obj.width || w;
					h = obj.height || (w / scale);
					var quality = this.d; // 默认图片质量为0.7
					//生成canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					// 创建属性节点
					var anw = document.createAttribute("width");
					anw.nodeValue = w;
					var anh = document.createAttribute("height");
					anh.nodeValue = h;
					canvas.setAttributeNode(anw);
					canvas.setAttributeNode(anh);
					ctx.drawImage(that, 0, 0, w, h);
					// 图像质量
					if(obj.quality && obj.quality <= 1 && obj.quality > 0) {
						quality = obj.quality;
					}
					// quality值越小，所绘制出的图像越模糊
					var base64 = canvas.toDataURL('image/jpeg', quality);
					// 回调函数返回base64的值
					callback(base64);
				}
			}
		</script>
	</body>

</html>